<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>评论互动 - 智能景区讲解</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        .comment-input {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- 顶部导航 -->
    <div class="fixed top-0 left-0 right-0 bg-white shadow-sm z-10">
        <div class="flex items-center p-4">
            <button class="text-gray-500">
                <i class="fas fa-arrow-left"></i>
            </button>
            <h1 class="text-lg font-bold mx-auto">评论互动</h1>
        </div>
    </div>

    <!-- 主要内容区 -->
    <div class="pt-16 pb-20">
        <!-- 评论列表 -->
        <div class="p-4 space-y-4">
            <!-- 评论项 -->
            <div class="bg-white rounded-xl shadow-sm p-4">
                <div class="flex items-start">
                    <div class="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center">
                        <i class="fas fa-user text-gray-400"></i>
                    </div>
                    <div class="ml-3 flex-1">
                        <div class="flex items-center justify-between">
                            <div>
                                <span class="font-medium">游客123</span>
                                <span class="text-xs text-gray-500 ml-2">2小时前</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-star text-yellow-400 text-sm"></i>
                                <span class="text-sm ml-1">5.0</span>
                            </div>
                        </div>
                        <p class="text-gray-600 text-sm mt-2">
                            西湖真的太美了！特别是苏堤春晓，杨柳依依，湖光山色，让人流连忘返。语音讲解也很详细，了解了很多历史故事。
                        </p>
                        <div class="flex items-center mt-3">
                            <button class="text-gray-500 text-sm flex items-center">
                                <i class="far fa-thumbs-up"></i>
                                <span class="ml-1">12</span>
                            </button>
                            <button class="text-gray-500 text-sm flex items-center ml-4">
                                <i class="far fa-comment"></i>
                                <span class="ml-1">3</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 评论项 -->
            <div class="bg-white rounded-xl shadow-sm p-4">
                <div class="flex items-start">
                    <div class="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center">
                        <i class="fas fa-user text-gray-400"></i>
                    </div>
                    <div class="ml-3 flex-1">
                        <div class="flex items-center justify-between">
                            <div>
                                <span class="font-medium">旅行达人</span>
                                <span class="text-xs text-gray-500 ml-2">昨天</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-star text-yellow-400 text-sm"></i>
                                <span class="text-sm ml-1">4.5</span>
                            </div>
                        </div>
                        <p class="text-gray-600 text-sm mt-2">
                            建议早上来，人少景美。语音讲解很专业，了解了很多历史典故。就是有些地方信号不太好，希望改进。
                        </p>
                        <div class="flex items-center mt-3">
                            <button class="text-gray-500 text-sm flex items-center">
                                <i class="far fa-thumbs-up"></i>
                                <span class="ml-1">8</span>
                            </button>
                            <button class="text-gray-500 text-sm flex items-center ml-4">
                                <i class="far fa-comment"></i>
                                <span class="ml-1">1</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 评论项 -->
            <div class="bg-white rounded-xl shadow-sm p-4">
                <div class="flex items-start">
                    <div class="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center">
                        <i class="fas fa-user text-gray-400"></i>
                    </div>
                    <div class="ml-3 flex-1">
                        <div class="flex items-center justify-between">
                            <div>
                                <span class="font-medium">摄影爱好者</span>
                                <span class="text-xs text-gray-500 ml-2">3天前</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-star text-yellow-400 text-sm"></i>
                                <span class="text-sm ml-1">5.0</span>
                            </div>
                        </div>
                        <p class="text-gray-600 text-sm mt-2">
                            西湖的每个角度都很美，特别是夕阳西下的时候。语音讲解很详细，让我对每个景点都有了更深的了解。强烈推荐！
                        </p>
                        <div class="flex items-center mt-3">
                            <button class="text-gray-500 text-sm flex items-center">
                                <i class="far fa-thumbs-up"></i>
                                <span class="ml-1">15</span>
                            </button>
                            <button class="text-gray-500 text-sm flex items-center ml-4">
                                <i class="far fa-comment"></i>
                                <span class="ml-1">2</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 评论输入框 -->
    <div class="fixed bottom-0 left-0 right-0 comment-input border-t border-gray-200 p-4">
        <div class="flex items-center">
            <div class="flex-1 bg-gray-100 rounded-full px-4 py-2">
                <input type="text" placeholder="写下你的评论..." class="w-full bg-transparent outline-none text-sm">
            </div>
            <button class="ml-2 text-blue-500">
                <i class="fas fa-paper-plane text-xl"></i>
            </button>
        </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200">
        <div class="grid grid-cols-4">
            <div class="text-center py-3 text-gray-500">
                <i class="fas fa-home text-xl"></i>
                <p class="text-xs mt-1">首页</p>
            </div>
            <div class="text-center py-3 text-gray-500">
                <i class="fas fa-map text-xl"></i>
                <p class="text-xs mt-1">地图</p>
            </div>
            <div class="text-center py-3 text-blue-500">
                <i class="fas fa-comment text-xl"></i>
                <p class="text-xs mt-1">社区</p>
            </div>
            <div class="text-center py-3 text-gray-500">
                <i class="fas fa-user text-xl"></i>
                <p class="text-xs mt-1">我的</p>
            </div>
        </div>
    </div>
</body>
</html> 